<template>
  <div class="main-container">
    <!-- 上方信息区域 -->
    <div class="top-info">
      <div class="info-section">
        <div class="section-title">推荐名称：XXXXXX</div>
        <div>对阵模式：封闭式</div>
        <div>推荐方式：回合制</div>
        <div>推演模式：单回合限时30秒</div>
        <div>比例尺：1:100 m</div>
      </div>

      <div class="separator"></div>

      <div class="info-section">
        <div>推演阶段：选择阶段</div>
        <div>当前回合：第5回合</div>
      </div>

      <div class="separator"></div>

      <div class="info-section">
        <div>当前阶段剩余时间：23秒</div>
        <div>推演时长：11小时23分55秒</div>
      </div>

      <div class="separator"></div>

      <div class="info-section">
        <div>红方剩余：10枚，红方损失：5枚</div>
        <div>红方侦测：2枚</div>
        <div>蓝方剩余：11枚，蓝方损失：4枚</div>
        <div>蓝方侦测：2枚</div>
      </div>
    </div>

    <!-- 左侧按钮区域 -->
    <div class="left-sidebar">
      <div class="button-container">
        <button
          class="icon-button"
          v-for="(btn, index) in buttons"
          :key="index"
          :class="{ active: activeButton === index }"
          @click="activeButton = index"
        >
          {{ btn }}
        </button>
      </div>
    </div>

    <!-- 地图组件 -->
    <MapComponent :pieces="pieces" @update:pieces="updatePieces" />

    <!-- 底部信息区域 -->
    <div class="bottom-info">
      <div class="status-container">
        <div class="current-status">状态：导入部 xxxx 已登录，推演进行中</div>
        <div class="round-status">
          当前回合：选择阶段，红方队员：5人，蓝方队员：5人
        </div>
        <div class="time-status">{{ currentDate }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import MapComponent from "@/components/MapComponent.vue";
import hoverSound from "@/assets/hover-sound.mp3";

export default {
  components: { MapComponent },
  data() {
    return {
      currentDate: this.getCurrentDate(),
      activeButton: null,
      buttons: ["总览", "开始决策", "下一回合", "态势存储", "结束推演"],
      pieces: [
        {
          name: "玩家1",
          x: 100,
          y: 100,
          rotation: 0,
          normalImg: require("@/assets/tank-red.png"),
          hoverGif: require("@/assets/tank-red-hover.gif"),
          isHover: false,
          nameColor: "#ff0000",
        },
        {
          name: "玩家2",
          x: 150,
          y: 150,
          rotation: 0,
          normalImg: require("@/assets/tank-blue.png"),
          hoverGif: require("@/assets/tank-blue-hover.gif"),
          isHover: false,
          nameColor: "#0099ff",
        },
      ],
      audio: new Audio(hoverSound),
    };
  },
  methods: {
    getCurrentDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    updatePieces(newPieces) {
      this.pieces = newPieces;
      localStorage.setItem("pieces", JSON.stringify(newPieces));
    },
  },
  created() {
    setInterval(() => {
      this.currentDate = this.getCurrentDate();
    }, 1000);

    const saved = localStorage.getItem("pieces");
    if (saved) {
      this.pieces = JSON.parse(saved);
    }
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
.main-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.top-info {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid red;
  height: 20vh;
  min-height: 120px;
  overflow: hidden;
}

.info-section {
  width: 22%;
  padding: 10px;
}

.separator {
  width: 1px;
  background-color: red;
  margin-left: 10px;
  margin-right: 10px;
}

.left-sidebar {
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 10%;
  width: 100px;
  padding: 20px 10px;
  border-right: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.icon-button {
  width: 60px;
  height: 60px;
  background-color: #ffa500;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.icon-button.active {
  background-color: #4caf50;
}

.icon-button:last-child {
  background-color: #dc3545;
}

.bottom-info {
  padding: 10px 15px;
  background: #e0e0e0;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #d1d1d1;
  margin-top: auto;
}

.status-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.current-status,
.round-status,
.time-status {
  font-size: 14px;
  color: #333;
}

.time-status {
  margin-left: auto;
  padding-left: 20px;
}
</style>
